---
import components from '@components/MDX/components';

// SideBars
import { getEntry, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import OwnersList from '@components/Lists/OwnersList';
import PillListFlat from '@components/Lists/PillListFlat';
import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
import { buildUrl } from '@utils/url-builder';
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
import { Page } from './_index.data';

export const prerender = Page.prerender;
export const getStaticPaths = Page.getStaticPaths;

// Get data
const props = await Page.getData(Astro);

const { Content } = await render(props);

const membersRaw = props.data.members || [];
const members = (await Promise.all(membersRaw.map((m: CollectionEntry<'teams'>) => getEntry(m)))).filter(Boolean);

const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
const services = props.data.ownedServices as CollectionEntry<'services'>[];
const events = props.data.ownedEvents as CollectionEntry<'events'>[];
const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
const queries = props.data.ownedQueries as CollectionEntry<'queries'>[];

const membersList = members.map((o) => ({
  label: o.data.name,
  type: o.collection,
  badge: o.collection === 'users' ? o.data.role : 'Team',
  collection: o.collection,
  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
}));

const ownedDomainsList = domains.map((p) => ({
  label: `${p.data.name}`,
  collection: p.collection,
  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
  tag: `v${p.data.version}`,
}));

const ownedServicesList = services.map((p) => ({
  label: `${p.data.name}`,
  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
  collection: p.collection,
  tag: `v${p.data.version}`,
}));

const ownedMessagesList = [...events, ...commands, ...queries].map((p) => ({
  label: `${p.data.name}`,
  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
  color: p.collection === 'events' ? 'orange' : 'blue',
  collection: p.collection,
  tag: `v${p.data.version}`,
}));

const pageTitle = `Team | ${props.data.name}`;
---

<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
    <div class="flex docs-layout w-full">
      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
        <div class="border-b border-gray-200 pb-4">
          <div class="flex justify-start">
            <div class="flex flex-col justify-between space-y-2">
              <div>
                <h2 class="text-4xl font-bold">{props.data.name} <span class="text-gray-300">(Team)</span></h2>
              </div>
              <div class="space-y-2">
                {
                  props.data.email && (
                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
                      <EnvelopeIcon className="w-4 h-4 text-purple-400" />
                      <a href={`mailto:${props.data.email}`}>Email</a>
                    </div>
                  )
                }
                {
                  props.data.slackDirectMessageUrl && (
                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
                      <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-3" />
                      <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
                    </div>
                  )
                }
                {
                  props.data.msTeamsDirectMessageUrl && (
                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
                      <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" />
                      <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
                        Send DM on Teams
                      </a>
                    </div>
                  )
                }
              </div>
            </div>
          </div>
          <h2 class="text-xl py-2 text-gray-500">{props.data.summary}</h2>
        </div>
        <div class="border-b border-gray-200" data-pagefind-ignore>
          <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="mx-auto max-w-2xl lg:max-w-none">
              <dl
                class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4"
              >
                <div class="flex flex-col p-8">
                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
                </div>
                <div class="flex flex-col p-8">
                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
                </div>
                <div class="flex flex-col p-8">
                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessagesList.length}</dd>
                </div>
                <div class="flex flex-col p-8">
                  <dt class="text-sm font-semibold leading-6 text-gray-600"># team members</dt>
                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{membersList.length}</dd>
                </div>
              </dl>
            </div>
          </div>
        </div>
        <div class="prose prose-md py-4 w-full">
          <Content components={components(props)} />
        </div>
      </div>
      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
        <div class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
          <PillListFlat
            color="pink"
            title={`Owned domains (${ownedDomainsList.length})`}
            pills={ownedDomainsList}
            emptyMessage={`${props.data.name} does not own any domains.`}
            client:load
          />
          <PillListFlat
            color="blue"
            title={`Owned services (${ownedServicesList.length})`}
            pills={ownedServicesList}
            emptyMessage={`This team does not own any services .`}
            client:load
          />
          <PillListFlat
            color="red"
            title={`Owned messages (${ownedMessagesList.length})`}
            pills={ownedMessagesList}
            emptyMessage={`This team does not own any messages .`}
            client:load
          />
          <OwnersList
            title={`Team members (${membersList.length})`}
            owners={membersList}
            emptyMessage={`This team does not have any members.`}
            client:load
          />
        </div>
      </aside>
    </div>
  </main>
</VerticalSideBarLayout>

<style>
  .docs-layout .prose {
    max-width: none;
  }
</style>
